<!--  -->
<template>
    <div>
    <!--内容-->
    <div class="m-pad-tb-big m-opacity m-container animated fadeIn">
        <div class="ui container">
            <div class="ui container">
                <!--header-->
                <div class="ui segment top attached">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h4 class="ui teal header">博客文章</h4>
                        </div>
                        <div class="right aligned column">
                            共 <h3 class="ui orange header m-inline-block m-text-thin">{{blogs.total}}</h3> 篇
                        </div>
                    </div>
                </div>
                <!--content-->
                <div class="ui padded segment m-pad-tb-large m-pad-lr-large" v-for="blog in blogs.list" :key="blog.id">
                    <div class="ui grid stackable mobile reversed">
                        <div class="nine wide column" >
                            <h3 class="ui header m-text-large" ><router-link class="m-a-head" :to="'/blog/'+blog.id">{{blog.title}}</router-link></h3>
                            <p class="m-text">{{blog.description+"..."}}</p>
                            <div class="ui grid ">
                                <div class="eleven wide column">
                                    <div class="ui horizontal link list">
                                        <div class="item">
                                            <i class="calendar icon"></i><span>{{blog.updateTime | formatDate("YYYY-MM-DD")}}</span>
                                        </div>
                                        <div class="item">
                                            <i class="eye icon"></i><span>{{blog.views}}</span>
                                        </div>
                                        <div class="item">
                                            <i class="comment outline icon"></i><span>{{blog.commentCount}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column right aligned ">
                                    <div class="ui label teal basic m-text-thin">{{blog.type.name}}</div>
                                </div>
                            </div>
                        </div>

                        <div class="seven wide column middle aligned ">
                            <router-link :to="'/blog/'+blog.id"><img src="../../assets/images/14.png"  class="ui rounded image scrollLoading"></router-link>
                        </div>
                    </div>
                </div>
                


                <!--footer-->
                <div class="ui bottom attached segment ">
                    <div class="ui center aligned middle aligned grid stackable">
                        <div class="four wide column">
                            <button class="ui button teal basic" @click="changePage(-1)" v-if="!blogs.isFirstPage">上一页</button>
                        </div>

                        <div class="eight wide column">
                            <p class="m-text-spaced-max">{{blogs.pageNum}}/{{blogs.pages}}</p>
                        </div>

                        <div class="four wide column">
                            <button class="ui button teal basic" @click="changePage(1)" v-if="!blogs.isLastPage">下一页</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
    </div>
</template>

<script>
export default {
    data () {
        return {
            blogs:"",
            pageNum:1,
            ImgDomainName:this.$ImgDomainName
        };
    },
    methods:{
        getBlogs(){
            var _this=this
            _this.axios.get("/getIndexBlogs",{
                params:{
                    pageNum:_this.pageNum
                }
            }).then((res) => {
                _this.blogs = res.data.pageInfo
                $(window).scrollTo(0,400);
                this.$nextTick(()=>{
                    $(".scrollLoading").scrollLoading()
                })
            }).catch((err) => {
                console.log(err)
            });
        },
        changePage(i){
            this.pageNum+=i
            this.getBlogs()
        },
    },
    created(){
        this.getBlogs()
    },
}

</script>
<style lang='scss' scoped>
</style>